<template>
  <u-popup
    v-model="showPopup"
    mode="bottom"
    safe-area-inset-bottom
    border-radius="22"
  >
    <view class="pay-way-page">
      <view class="page-content">
        <view class="page-header">
          <view>{{ $t("order.methods") }}</view>
          <image
            @click="showPopup = false"
            :src="asyncImgs.images.white_close_icon"
            alt=""
            mode="aspectFit"
          >
          </image>
        </view>
        <view class="pay-way-list">
          <view
            class="pay-way-item"
            v-for="(item, index) in pay_type_list"
            @click="payTypeSelect(item.payment)"
            :key="index"
          >
            <view class="pay-way-info">
              <i
                v-if="item.payment == 1"
                class="icon-weixinzhifu iconfont"
                style="color: #09bb07; font-size: 54rpx"
              ></i>
              <i
                v-else-if="item.payment == 2"
                class="icon-yinhangka1 iconfont"
                style="color: #34cb9b; font-size: 54rpx"
              ></i>
              <i
                v-else-if="item.payment == 4"
                class="icon-zhifubao1 iconfont"
                style="color: #5a9ef7; font-size: 54rpx"
              ></i>
              <text>{{ item.name }}</text>
            </view>

            <view class="way-status">
              <image
                v-if="value == item.payment"
                :src="asyncImgs.images.choosed_red_icon"
                alt=""
                mode="aspectFit"
              ></image>
              <view v-else></view>
            </view>
          </view>
        </view>

        <view class="confirm-section">
          <view @click="handleConfirm">{{ $t("list.confirm") }}</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
// 1:微信，2:货到付款，3:余额，4:支付宝
export default {
  data() {
    return {
      value: -1,
      imgs: [],
      showPopup: false,
    };
  },
  created() {
    this.imgs = [
      "",
      this.asyncImgs.images.wx_pay_icon,
      this.asyncImgs.images.receive_pay_icon,
      this.asyncImgs.images.account_pay_icon,
      this.asyncImgs.images.alipay_icon,
      this.asyncImgs.images.account_pay_icon,
    ];
  },
  props: {
    order: {
      type: Object,
      default: function () {
        return {};
      },
    },
    pay_type_list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    payType: {
      default: -1,
    },
  },
  watch: {
    payType: {
      handler: function (val) {
        this.value = val;
      },
      immediate: true,
    },
  },

  computed: {},
  methods: {
    setShowPayPopup() {
      this.showPopup = !this.showPopup;
    },
    payTypeSelect(type) {
      this.value = type;
    },
    // 点击确认按钮
    handleConfirm() {
      this.$emit("payTypeSelect", {
        type: this.value,
      });
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-way-page {
  // width: 100%;
  // // min-height: 100vh;
  // position: fixed;
  // left: 0;
  // top: 0;
  // z-index: 111;

  // .page-bg {
  // 	width: 100%;
  // 	min-height: 100vh;
  // 	background-color: #3d3d3d;
  // 	opacity: 0.75;
  // }

  .page-content {
    width: 100%;
    // background: #ffffff;
    // border-radius: 22rpx 22rpx 0 0;
    padding-top: 30rpx;
    // position: absolute;
    // bottom: 0;

    .page-header {
      width: 100%;
      text-align: center;
      position: relative;
      margin-bottom: 34rpx;

      view {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #262626;
        line-height: 44rpx;
      }

      image {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 36rpx;
        top: 0;
        z-index: 11;
      }
    }

    .pay-way-list {
      width: 100%;
      padding-left: 36rpx;
      margin-bottom: 188rpx;

      .pay-way-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40rpx 36rpx 40rpx 0;
        border-bottom: 1px solid #f2f2f2;

        .pay-way-info {
          display: flex;
          align-items: center;

          image {
            width: 48rpx;
            height: 48rpx;
            display: block;
            margin-right: 22rpx;
          }

          text {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #262626;
            line-height: 44rpx;
          }
        }

        .way-status {
          view {
            width: 32rpx;
            height: 32rpx;
            background: #ffffff;
            border: 3rpx solid #8c8c8c;
            border-radius: 16rpx;
          }

          image {
            width: 32rpx;
            height: 32rpx;
            display: block;
          }
        }
      }
    }

    .confirm-section {
      width: 100%;
      background: #ffffff;
      box-shadow: 0 1rpx 0 0 #f2f2f2;
      padding: 12rpx 36rpx;

      view {
        width: 100%;
        height: 76rpx;
        background: linear-gradient(90deg, #ff4e18, #f32524);
        border-radius: 38rpx;
        text-align: center;
        line-height: 76rpx;
        font-size: 30rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
}
</style>
